<template>
    <el-row>
    <el-col :span="24">
        <div class="grid-content header">
            <el-row>
                <el-col :span="4">
                    <i class="el-icon-edit header-isMenu" @click="isMenu"></i>
                </el-col>
                <el-col :span="18">
                    <span class="header-name">管理系统</span>
                </el-col>
                <el-col :span="2">
                    <el-dropdown @command="handleCommand" trigger="click">
                        <span class="el-dropdown-link">
                            <img class="header-avatar-img" src="http://bitwork-1252875234.coscd.myqcloud.com/g.jpeg?sign=NGTsKlVBq5o7euuev5wda9ckR55hPTEyNTI4NzUyMzQmaz1BS0lENzRSYVQ3S2VYQlpoWkJkZVY2U2RZRWZxcmRBU0xLdUYmZT0xNTI4NjE5MTcxJnQ9MTUyNjAyNzE3MSZyPTE4OTczMjA5NTImZj0vZy5qcGVnJmI9Yml0d29yaw==" alt="">
                        </span>
                        <el-dropdown-menu slot="dropdown">
                            <el-dropdown-item>设置</el-dropdown-item>
                            <el-dropdown-item command="laout">退出</el-dropdown-item>
                        </el-dropdown-menu>
                    </el-dropdown>
                </el-col>
            </el-row>
        </div>
    </el-col>
</el-row>
</template>

<script>
export default {
  props: ["isCollapse"],
  methods: {
    isMenu() {
      this.$emit("update:isCollapse", !this.$props.isCollapse);
    },

    handleCommand(command) {
      switch (command) {
        case "laout":
          localStorage.setItem("lishizhenLogin", "");
          this.$store.dispatch("loginInfo", false);
          this.$router.push({ name: "登录" });
          break;
        default:
          break;
      }
    }
  }
};
</script>

<style lang="scss">
@import "../sass/main.scss";

.header {
  height: 60px;
  background-color: $themeColor;
  .header-isMenu {
    text-align: center;
    color: white;
    display: block;
    width: 64px;
    line-height: 60px;
  }
  .header-name {
    color: white;
    display: block;
    font-size: 20px;
    line-height: 60px;
  }
  .header-avatar-img {
    margin-top: 5px;
    width: 50px;
    height: 50px;
    border-radius: 50%;
    float: right;
    line-height: 60px;
    margin-right: 50px;
  }
}
</style>


